import styles from "./index.module.less";
import cs from "classnames";
import { useRequest } from "ahooks";
import { getTotalSta } from "@/api/modules/report";

export default () => {
	const { data: total } = useRequest(() => getTotalSta({}));
	const totalData = total?.data;

	return (
		<div className={styles.cardContainer}>
			<div className={cs(styles.cardItem, styles.task)}>
				<div className={styles.up}>
					<div className={styles.label}>总任务数</div>
					<div className={styles.value}>{totalData?.totalTasks}</div>
				</div>
				<div className={styles.down}>
					<div className={styles.left}>
						<div className={styles.label}>今日总任务数</div>
						<div className={styles.value}>{totalData?.todayTasks}</div>
					</div>
				</div>
			</div>
			<div className={cs(styles.cardItem, styles.line)}>
				<div className={styles.up}>
					<div className={styles.label}>总环线数</div>
					<div className={styles.value}>
						{totalData?.totalRoutes}
						<span className={styles.unit}>条</span>
					</div>
				</div>
				<div className={styles.down}>
					<div className={styles.left}>
						<div className={styles.label}>
							总执行数
							<span className={styles.value}>{totalData?.totalExecutions}</span>条
						</div>
					</div>
					<div className={styles.right}>
						<div className={styles.label}>
							今日执行数
							<span className={styles.value}>{totalData?.todayExecutions}</span>条
						</div>
					</div>
				</div>
			</div>
			<div className={cs(styles.cardItem, styles.car)}>
				<div className={styles.up}>
					<div className={styles.label}>总车辆数</div>
					<div className={styles.value}>
						{totalData?.totalVehicles}
						<span className={styles.unit}>辆</span>
					</div>
				</div>
				<div className={styles.down}>
					<div className={styles.left}>
						<div className={styles.label}>
							总行驶里程
							<span className={styles.value}>
								{totalData?.totalMileage
									? Number(totalData.totalMileage) % 1 === 0
										? Number(totalData.totalMileage).toString()
										: Number(totalData.totalMileage)
												.toFixed(2)
												.replace(/\.?0+$/, "")
									: 0}
							</span>
							km
						</div>
					</div>
					<div className={styles.right}>
						<div className={styles.label}>
							今日里程
							<span className={styles.value}>
								{totalData?.todayMileage
									? Number(totalData.todayMileage) % 1 === 0
										? Number(totalData.todayMileage).toString()
										: Number(totalData.todayMileage)
												.toFixed(2)
												.replace(/\.?0+$/, "")
									: 0}
							</span>
							km
						</div>
					</div>
				</div>
			</div>
		</div>
	);
};
